<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>给组件绑定原生事件</title>
	<script src="vue.js"></script>
</head>
<body>
	
	<!-- 第一种方法, 需要2层传递 -->
	<!-- 我们给一个子组件上面绑定了一个事件, 然后点击, 发现无效 -->
	<!-- 原因:直接写上子组件上面的click其实是一个自定义事件, 可以在组件中用$emit触发自定义事件, 然后在父组件中定义这个函数, 进行触发 -->
	<!-- 上述需要2层的传递, 子组件触发, 父组件接受, 再触发. -->
	<div id="root">
		<child @click="handleClick"></child>
	</div>

	<script>
		
		Vue.component('child', {
			template: '<div @click="handleChildClick">Child</div>',
			methods: {
				handleChildClick: function() {
					this.$emit('click')
				}
			}
		})

		var vm = new Vue({
			el:'#root',
			data: {

			},
			methods:{
				handleClick: function(){
					alert('click')
				}
			}
		})
	</script>
	
	<!-- ---------------------------------------------------------------- -->
	<!-- 下面用第二种方式 -->
	<!-- 如下, 在子组件绑定自定义事件的时候, 加上 .native 则表明就是绑定原生事件, 可以直接点击触发. -->
	<div id="root1">
		<child @click.native="handleClick"></child>
	</div>
	<script>
		Vue.component('child', {
			template: '<div>Child</div>'
		})

		var vm1 = new Vue({
			el: '#root1',
			methods: {
				handleClick: function(){
					alert('click')
				}
			}
		})
	</script>




















</body>
</html>